<template>
	<div>
		<div style="padding: 10px;border-radius: 8px;background: #fff;margin-bottom: 10px;" class="displayFlexBet">
			<div class="displayFlex" style="flex: 1;">
				<span style="margin-right: 10px;color: #999;">时间：</span>
				<el-date-picker v-model="params.monthDate" placeholder="时间" format="yyyy" value-format="yyyy" type="year"
					size="small" style="width: 140px;" @change="getGasQualifiedStatistics" :clearable="false">
				</el-date-picker>
			</div>


			<div class="displayFlex">
				<div class="date-item displayFlex mr20">
					<el-select v-model="params.dataType" filterable placeholder="数据类型" @change="getGasQualifiedStatistics">
						<el-option key="HOUR" label="小时数据" value="HOUR" />
						<el-option key="DAY" label="日数据" value="DAY" />
					</el-select>
				</div>

				<div class="date-item displayFlex mr20">
					<el-select v-model="params.outletApproach" filterable placeholder="排口类型"
						@change="getGasQualifiedStatistics">
						<el-option key="ORGANIZED_OUTLET" label="有组织排放" value="ORGANIZED_OUTLET" />
						<el-option key="DISORGANIZED_OUTLET" label="无组织排放" value="DISORGANIZED_OUTLET" />
					</el-select>
				</div>

				<div class="date-item displayFlex">
					<el-select v-model="params.monitorType" filterable placeholder="设备类型"
						@change="getGasQualifiedStatistics">
						<el-option key="CEMS" label="CEMS" value="CEMS" />
						<el-option key="AIR_SITE" label="空气微站" value="AIR_SITE" />
						<el-option key="TSP" label="TSP" value="TSP" />
					</el-select>
				</div>
			</div>
		</div>

		<div v-loading="loading">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="outletName" label="排口" width="180">
				</el-table-column>
				<el-table-column prop="YTD" label="年度" width="180">
				</el-table-column>
				<el-table-column prop="Jan" label="一月">
				</el-table-column>
				<el-table-column prop="Feb" label="二月">
				</el-table-column>
				<el-table-column prop="Mar" label="三月">
				</el-table-column>
				<el-table-column prop="Apr" label="四月">
				</el-table-column>
				<el-table-column prop="May" label="五月">
				</el-table-column>
				<el-table-column prop="Jun" label="六月">
				</el-table-column>
				<el-table-column prop="Jul" label="七月">
				</el-table-column>
				<el-table-column prop="Aug" label="八月">
				</el-table-column>
				<el-table-column prop="Sep" label="九月">
				</el-table-column>
				<el-table-column prop="Oct" label="十月">
				</el-table-column>
				<el-table-column prop="Nov" label="十一月">
				</el-table-column>
				<el-table-column prop="Dec" label="十二月">
				</el-table-column>
			</el-table>
		</div>


	</div>
</template>

<script>
	import moment from 'moment'
	import * as echarts from 'echarts';

	let that
	export default {
		data() {
			return {
				params: {
					outletId: '',
					dataType: 'HOUR',
					outletApproach: '',
					monitorType: '',
					monthDate: moment().format('YYYY'),
				},
				loading: false,
				tableData: []
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.getGasQualifiedStatistics()
		},

		methods: {
			getGasQualifiedStatistics() {
				that.loading = true
				that.ajax({
					url: '/outletDetail/getGasQualifiedStatistics',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.tableData = result.data
						}
						that.loading = false
					},
				})
			},



		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}

	.selected {
		color: #3A3EF4 !important;
	}
</style>